@import url(./base.less);
@import "./normalize.less";
@langSize: 37.5rem;
body {
  //   position: relative;
  background-color: #f7f7f7;
}
.main {
  //   position: relative;
  margin-bottom: (15 / @langSize);
  .banner {
    display: flex;
    justify-content: center;
    height: (196 / @langSize);
    //   background-color: aqua;
    background: url(../images/banner.png) no-repeat center center;
    background-size: cover;
    .sou {
      // text-align: center;
      // margin: (6 / @langSize) 0 0 0;
      display: flex;
      align-items: center;
      border-radius: (30 / @langSize);
      margin-top: (6 / @langSize);
      width: (296 / @langSize);
      height: (30 / @langSize);
      background-color: #fff;
      input {
        font-size: 14px;
        border-radius: (30 / @langSize);
        border: none;
        margin-left: (5 / @langSize);
      }
      span {
        margin-left: (10 / @langSize);
        font-size: (18 / @langSize);
      }
    }
  }
  .xuan {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: (100 / @langSize);
    background-color: #fff;
    .one {
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      align-items: center;
      width: (53 / @langSize);
      height: (77 / @langSize);
      //   background-color: #fff;
      p {
        font-size: (12 / @langSize);
        color: #333;
      }
    }
  }
  .xuan_2 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: (10 / @langSize);
    height: (128 / @langSize);
    background-color: #fff;
    .two {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: (84 / @langSize);
      height: (109 / @langSize);
      background-color: #e1e8f8;
      &.bg2 {
        background-color: #e0f3fb;
      }
      &.bg3 {
        background-color: #fcf7ee;
      }
      &.bg4 {
        background-color: #e2dff6;
      }
      h3 {
        font-size: 12px;
        font-weight: 400;
        color: #333;
        margin: 10px 0;
      }
      p {
        display: flex;
        justify-content: center;
        width: (57 / @langSize);
        color: #6784c8;
        margin-bottom: 14px;
        font-size: 9px;
        transform: scale(0.83333);
        transform-origin: 0 0;
        white-space: nowrap;
        &.off {
          margin-left: (7 / @langSize);
        }
        &.co {
          color: #dbbd88;
        }
      }

      img {
        width: (70 / @langSize);
        height: (33 / @langSize);
      }
    }
  }
  .re {
    position: relative;
    margin-top: (10 / @langSize);
    height: (320 / @langSize);
    background-color: #fff;
    .chao {
      display: flex;
      justify-content: center;
      align-items: center;
      height: (47 / @langSize);
      p {
        display: flex;
        justify-content: center;
        position: absolute;
        width: (30 / @langSize);
        height: (15 / @langSize);
        top: (16 / @langSize);
        right: (12 / @langSize);
        color: #b4a078;
        font-size: 10px;
        transform: scale(0.83333);
        transform-origin: 0 0;
        white-space: nowrap;
        border: solid 1px #b4a078;
        border-radius: 1px;
      }
      h3 {
        font-size: (16 / @langSize);
        color: #383838;
        font-weight: 400;
      }
      .icon-roundright {
        margin-left: (7 / @langSize);
        font-size: (16 / @langSize);
      }
    }
    .re_bottom {
      display: flex;
      justify-content: space-evenly;
      .bo_le {
        height: (260 / @langSize);
        width: (170 / @langSize);
        .imge {
          width: (170 / @langSize);
          height: (170 / @langSize);
          background: #ebebeb;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        img {
          margin: (12 / @langSize) (16 / @langSize) 0 (15 / @langSize);
          width: (139 / @langSize);
          height: (150 / @langSize);
        }
        h3 {
          font-size: (14 / @langSize);
          font-weight: 400;
          color: #333;
          margin-top: (16 / @langSize);
          margin-left: (13 / @langSize);
        }
        p {
          font-size: (12 / @langSize);
          color: #fc5051;
          margin-top: (36 / @langSize);
          margin-left: (13 / @langSize);
          span {
            font-size: (16 / @langSize);
          }
        }
      }
    }
  }
}
footer {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 1s;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: (49 / @langSize);
  background-color: #fff;
  .foot {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .icon-home,
    .icon-fenlei,
    .icon-gouwu,
    .icon-wode {
      color: #757575;
      font-size: (30 / @langSize);
    }

    p {
      color: #757575;
      font-size: (12 / @langSize);
    }
  }
  .foot:first-child span {
    color: #fc5051;
  }
}
